<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>摄影首页</title>

</head>

<body>
    <header data-target="#scoll" data-offset="0" data-spy="scroll" class="container-fliud position-relative">
        <div class="row px-5 mx-0 justify-content-around" id="Home">
            <div class="col">
                <i class="iconfont icon-xiangji1fill mr-1"></i><span>Photostat</span>
                <br>
                <p>On one Click</p>
            </div>
            <div class="col-md-7 col-lg-6 col-xl-5 d-md-block justify-content-center  navbar collapse show" id="zhedie">
                <div class="navbar-bar d-md-flex mt-4 d-sm-block justify-content-end ">
                    <li class="navbar-item mx-2"><a href="#Home" class="narbar-link">Home</a></li>
                    <li class="navbar-item mx-2"><a href="#About" class="narbar-link">About</a></li>
                    <li class="navbar-item mx-2"><a href="#MyPhotos" class="narbar-link">My Photos</a></li>
                    <li class="navbar-item mx-2"><a href="#Contact" class="narbar-link">Contact </a></li>
                </div>
            </div>
            <button data-target="#zhedie" data-toggle="collapse"
                class="iconfont  position-absolute icon-liebiao btn d-sm-block d-md-none"></button>
        </div>
    </header>
    <div class="container-fluid banner mx-0 px-0">
        <div class="carousel slide" data-ride="carousel" id="banner">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <a href="#"><img class="img-fluid" src="./images/banner1.jpg" alt=""></a>
                </div>
                <div class="carousel-item">
                    <a href="#"><img class="img-fluid" src="./images/banner2.jpg" alt=""></a>
                </div>
                <div class="carousel-item">
                    <a href="#"><img class="img-fluid" src="./images/banner3.jpg" alt=""></a>
                </div>
                <div class="carousel-item">
                    <a href="#"><img class="img-fluid" src="./images/banner4.jpg" alt=""></a>
                </div>
                <a href="#banner" class="carousel-control-prev" data-slide='prev'>
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a href="#banner" class="carousel-control-next" data-slide='next'>
                    <span class="carousel-control-next-icon"></span>
                </a>
                <ol class="carousel-indicators">
                    <li class="active" data-target="#banner" data-slide-to="0"></li>
                    <li data-target="#banner" data-slide-to="1"></li>
                    <li data-target="#banner" data-slide-to="2"></li>
                    <li data-target="#banner" data-slide-to="3"></li>
                </ol>
            </div>
        </div>
    </div>
    <div class="myCar container "data-target="#scoll" data-offset="0" data-spy="scroll" >
        <div class="row " id="About">
            <div class="col-lg-5 text-center">
                <img class="img-fluid" src="./images/ab.jpg" alt="">
            </div>
            <div class="col-lg-7">
                <h2 class="mt-5">ABOUT ME</h2>
                <p class="myCarp1Color">PROFESSIONAL IN PHOTOGRAPHY</p>
                <hr>
                <p class="Aboutjeshao">Nulla eget mauris quis elit mollis ornare vitae ut odio. Cras tincidunt, augue
                    vitae sollicitudin commodo, quam elit varius est, et ornare ante massa quis tellus. Mauris nec
                    lacinia nisl. Curabitur tempus tellus et vulputate vestibulum.</p>
                <p class="Aboutjeshao">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed euismod tincidunt
                    ut laoreet dolore magna aliquam erat volutpat.</p>
                <em class="my-3">Nulla eget mauris quis elit mollis ornare vitae ut odio. Cras tincidunt, augue vitae
                    sollicitudin commodo, quam elit varius est</em>
            </div>
        </div>
    </div>
    <div class="continer-fluid mx-0  myPhotos"id="MyPhotos" data-target="#scoll" data-offset="0" data-spy="scroll">
        <h2 class="text-center mb-3">My Phoths</h2>
        <div class="row mx-0">
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g1.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g2.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g3.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g4.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g5.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g6.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g7.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g8.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g9.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g10.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g11.jpg" alt="">
            </div>
            <div
                class="col-xl-3 mx-0 px-0 col-lg-4 d-md-flex align-items-center justify-content-center align-content-center col-md-6">
                <span class="w-100 h-100 d-flex iconfont icon-xiangji1fill position-absolute"></span><img
                    class="img-fluid" src="./images/g12.jpg" alt="">
            </div>
        </div>
    </div>
    <footer class="container-fulid py-5" id="Contact" data-target="#scoll" data-offset="0" data-spy="scroll">
        <div class="text-center mt-5 "><i class="iconfont icon-xiangji1fill"></i></div>
        <div class="text-center mt-5">
            <li class="d-inline mx-2"><a class="iconfont icon-duanxin
              " href=""></a></li>
            <li class="d-inline mx-2"><a class="iconfont icon-diqiu" href=""></a></li>
            <li class="d-inline mx-2"><a class="iconfont icon-charutupian" href=""></a></li>
            <li class="d-inline mx-2"><a class="iconfont icon-24gl-telephone2" href=""></a></li>
        </div>
        <p class="text-center mt-5 text-light">Copyright © 2017.Company name All rights reserved.</p>
    </footer>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="./js/bootstrap.min.js"></script>
</body>

</html>